<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 70px;				
				background-color: blueviolet;
				position: absolute;
			}
			#box2{
				width: 100px;
				height: 70px;
				background-color: yellow;
				position: absolute;
				left: 120px;
				top: 100px;				
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var box1=document.getElementById("box1");
				var box2=document.getElementById("box2");
				var img1=document.getElementById("img1");
				drag(box1);
				drag(box2);
				drag(img1);
			}
			function drag(obj){
				obj.onmousedown=function(event){
					event=event||window.event;
					obj.setCapture && obj.setCapture();/*有就执行，没有不执行*//*将下一次鼠标点击事件捕获到自身*/
					var ol=event.clientX-obj.offsetLeft;/*鼠标的x-方块的x*/
					var ot=event.clientY-obj.offsetTop;
					document.onmousemove=function(event){
						event=event||window.event;
						obj.style.left=event.clientX-ol+"px";
						obj.style.top=event.clientY-ot+"px";
					};
					document.onmouseup=function(){
						document.onmousemove=null;
						document.onmouseup=null;
						obj.releaseCapture && obj.releaseCapture();/*鼠标松开时，取消捕获*/

					};
					return false;/*拖拽内容时，浏览器会默认搜索他，可能导致拖拽异常，可以通过return false取消，IE8不支持，IE8要用26行+37行那种方法*/
				};
			}
		</script>
	</head>
	<body>
		这是一段文字
		<div id="box1"></div>
		<div id="box2"></div>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<img src="img/1.jpg" id="img1" style="position: absolute;"/>
	</body>
</html>
